<script setup lang="ts">
import { type Ref, reactive, ref, onMounted, h ,toRaw } from "vue";
import { useI18n } from "vue-i18n";
import { getKeyList,cloneDeep, isAllEmpty,storageLocal, deviceDetection } from "@pureadmin/utils";
const { t } = useI18n();
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import dayjs from "dayjs";
import {addDialog, closeDialog} from "@/components/ReDialog/index";
import {getOrderDetail} from "@/api/system";
onMounted(() => {
  getOrderInfo()
});

import { SuccessFilled, CopyDocument,Notification } from '@element-plus/icons-vue'
// 声明 props 类型
export interface FormProps {
  formInline: {

  };
}
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({  })
});

const newFormInline = ref(props.formInline);
const handleClose = (tag: string) => {
  newFormInline.value.selectOrders.splice(newFormInline.value.selectOrders.indexOf(tag), 1)
}
//console.log(7777,newFormInline.value)//【退款订单 4】、【买家取消订单 5】、【部分退款 6】、【退款中 7】、【取消中 8】、【部分取消 9】、【妥投失败 10】、【取消退款 11
const abnormalType = [
  {id:4,txt:'退款订单'},{id:5,txt:'买家取消订单'},{id:6,txt:'部分退款'},{id:7,txt:'退款中'},{id:8,txt:'取消中'},{id:9,txt:'部分取消'},{id:10,txt:'妥投失败'},{id:11,txt:'取消退款'}
]
const orderStatusType = [
  {id:1,txt:'待配货'},{id:2,txt:'配货中'},{id:3,txt:'已发货'},{id:4,txt:'已完成'},{id:5,txt:'已作废'}//orderStatus
]
const log_column = [
  {label: "操作类型", prop: "log_type",width:120,},
  {label: "操作人员",width:120,prop: "creator"},
  {label: "操作时间", width: 140, prop: "created_at"},
  {label: "备注",width: 200, showOverflowTooltip:true, prop: "remark"},
  {label: "描述",showOverflowTooltip:true,minWidth: 200,prop: "content"},
];
const orders_column = [
  {label: "订单编号", prop: "order_number",width:150,},
  {label: "业务员",width:120,prop: "diy_sales_name"},
  {label: "跟进状态", width: 140, prop: "diy_status_text"},
  {label: "账号状态",width: 120, showOverflowTooltip:true, prop: "diy_tags"},
  {label: "分配时间",minWidth: 140,prop: "diy_allo_at"},
  {label: "订单状态",minWidth: 80,prop: "status_text"},
  {label: "跟进备注",showOverflowTooltip:true,minWidth: 200,prop: "diy_remark"},
];
const jump =(url)=>{
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank'; // 可选：新标签页打开
  link.click();
}

const orderInfo = ref(props.formInline);
const getOrderInfo = async function () {
  const {data} = await getOrderDetail({order_number:newFormInline.value.order_number});
  orderInfo.value = data;
}
//强制更新，会全部重新拉取订单数据
const getOrderInfoForce = async function () {
  const {data} = await getOrderDetail({order_number:newFormInline.value.order_number,force:1});
  orderInfo.value = data;
}
const formatDate =(row, column, cellValue)=>{
  return cellValue>0?dayjs(cellValue*1000).format("YYYY-MM-DD HH:mm:ss"):'-'
}
import trackForm from "./track.vue";
const track=()=>{
  addDialog({
    title: `订单追踪页`,
    props: {
      formInline: JSON.parse(JSON.stringify( orderInfo.value)),
    },
    width: "80%",
    draggable: true,
    hideFooter:true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(trackForm),
  });
}
</script>

<template>
  <re-col>
    <el-card class="custom-card" shadow="never">
      <h5>订单信息
        <el-link size="small" style="margin-left: 50px" :icon="useRenderIcon('fa-solid:comment-dollar')" @click="jump(orderInfo.check_url)"></el-link>
        <el-link size="small" style="margin-left: 30px" :icon="useRenderIcon('fa-solid:tractor')" @click="jump(orderInfo.order_url)"></el-link>
        <el-link size="small" type="primary" style="margin-left: 30px" :icon="useRenderIcon('ri:shake-hands-line')" @click="track">追踪页</el-link>
        <el-button size="small" type="warning" style="margin-left: 30px" @click="getOrderInfoForce">手动更新</el-button>

      </h5>

      <el-descriptions :column="4" border size="small">
        <el-descriptions-item label="订单编号"min-width="90px">{{orderInfo.order_number||'-'}}</el-descriptions-item>
        <el-descriptions-item label="订单状态" min-width="90px">{{orderInfo.status_text||'-'}}</el-descriptions-item>
        <el-descriptions-item label="交易号" min-width="90px">{{orderInfo.transaction.transaction_no||'-'}}</el-descriptions-item>
        <el-descriptions-item label="店铺" min-width="90px">{{orderInfo.shop_name||'-'}}</el-descriptions-item>

        <el-descriptions-item label="订单总额">{{orderInfo.total_price||'-'}} {{ orderInfo.currency_code }}
          {{orderInfo.currency_code!='USD'?('≈'+(orderInfo.total_price/orderInfo.currency_rate).toFixed(2)+'USD'):''}}
        </el-descriptions-item>
        <el-descriptions-item label="商品总额">{{orderInfo.current_total_price||'-'}} {{ orderInfo.currency_code }}</el-descriptions-item>
        <el-descriptions-item label="运费险">{{orderInfo.current_insurance_price}}{{ orderInfo.currency_code }}</el-descriptions-item>
        <el-descriptions-item label="订单运费">{{orderInfo.current_shipping_price}}{{ orderInfo.currency_code }}</el-descriptions-item>
        <el-descriptions-item label="小费">{{orderInfo.current_tip_price||'-'}}{{ orderInfo.currency_code }}</el-descriptions-item>
<!--        <el-descriptions-item label="付款时间">{{orderInfo.pay_at||'-'}}</el-descriptions-item>-->
        <el-descriptions-item label="优惠券金额">{{orderInfo.current_coupon_price||'-'}}</el-descriptions-item>
        <el-descriptions-item label="活动优惠">{{orderInfo.coupon_id||'-'}}</el-descriptions-item>
        <el-descriptions-item label="客户下单时间">{{orderInfo.created_at||'-'}}</el-descriptions-item>
        <el-descriptions-item label="优惠券">{{orderInfo.coupon_code||'-'}}</el-descriptions-item>
        <el-descriptions-item label="优惠活动名字">{{orderInfo.coupon_name||'-'}}</el-descriptions-item>
        <el-descriptions-item label="网站发货方式">{{orderInfo.shipping_zone_name||'-'}}</el-descriptions-item>
        <el-descriptions-item label="汇率">{{orderInfo.currency_rate||'-'}}</el-descriptions-item>
        <el-descriptions-item label="客户留言">{{orderInfo.note||'-'}}</el-descriptions-item>
        <el-descriptions-item label="商家备注">{{orderInfo.admin_note||'-'}}</el-descriptions-item>
        <el-descriptions-item label="业务员">{{orderInfo.diy_sales_name||'-'}}</el-descriptions-item>
        <el-descriptions-item label="网站分组">{{orderInfo.diy_group_text||'-'}}</el-descriptions-item>
        <el-descriptions-item label="网站地址">{{orderInfo.store_url||'-'}}</el-descriptions-item>
        <el-descriptions-item label="客户IP地址">{{orderInfo.ip||'-'}}</el-descriptions-item>
        <el-descriptions-item label="首次同步时间">{{orderInfo.frist_aysc_at_text||'-'}}</el-descriptions-item>
        <el-descriptions-item label="最后同步时间">{{orderInfo.last_aysc_at||'-'}}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{orderInfo.updated_at||'-'}}</el-descriptions-item>
        <el-descriptions-item label="付款状态">{{orderInfo.financial_status_text||'-'}}</el-descriptions-item>
        <el-descriptions-item label="发货状态">{{orderInfo.fulfillment_status_text||'-'}}</el-descriptions-item>
        <el-descriptions-item label="客户语言">{{orderInfo.customer_language||'-'}}</el-descriptions-item>
        <el-descriptions-item label="UTM">{{orderInfo.utm_source||'-'}}</el-descriptions-item>
      </el-descriptions>



    </el-card>
    <el-card class="custom-card" shadow="never" size="small">
      <h5>{{ t("orders.goodsInfo") }}</h5>
      <el-table :data="orderInfo.items" style="width: 100%" size="small">
        <el-table-column prop="title" :label="t('orders.goodsInfo')" >
          <template #default="scope">
            <el-row :gutter="20">
              <el-col :span="6"><el-image style="width: 40px; height: 40px" :src="scope.row.src" :preview-src-list="[scope.row.src]" :preview-teleported="true" /></el-col>
              <el-col :span="18">
                <div><el-text size="small" type="primary">{{scope.row.sku}}</el-text><el-text size="small">x{{scope.row.quantity}}{{scope.row.productUnit}}</el-text></div>
                <div><el-text size="small" truncated line-clamp="2">{{scope.row.title}}</el-text></div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="spu" label="Spu" width="80" />
        <el-table-column prop="price" :label="t('orders.goodsPrice')" width="90" ></el-table-column>
        <el-table-column prop="discount_price" :label="t('orders.goodsDiscountPrice')" width="90" ></el-table-column>
        <el-table-column prop="vendor" :label="t('orders.vendor')" width="90" ></el-table-column>
        <el-table-column prop="sku_value" show-overflow-tooltip :label="t('orders.saleAttr')" width="120" />
        <el-table-column prop="product_type" :label="t('orders.goodsType')" width="80" />
        <el-table-column prop="weight" :label="t('orders.goodsWeight')" width="140" />

<!--        { label: "是否应税",width: 80, prop: "taxable",cellRenderer:  scope =>(scope.row.taxable==1?'是':'否')},-->
<!--        { label: "数据来源",width: 90, prop: "data_from"},-->
<!--        { label: "内部标题",width: 140, prop: "inner_title"}-->
      </el-table>
    </el-card>
    <el-card class="custom-card" shadow="never">
      <h5>{{ t("orders.customerInfo") }}</h5>
      <el-descriptions :column="4" border size="small">
        <el-descriptions-item :label="t('orders.customerId')" min-width="90px">{{orderInfo.customer_id||'-'}}</el-descriptions-item>
        <el-descriptions-item :label="t('orders.customerName')" min-width="90px">{{orderInfo.customer_name||'-'}}</el-descriptions-item>
        <el-descriptions-item :label="t('orders.contactPhone')" min-width="90px">{{orderInfo.shipping_address.tel_area_code}}-{{orderInfo.shipping_address.phone||'-'}}</el-descriptions-item>
        <el-descriptions-item :label="t('orders.contactEmail')" min-width="90px">{{orderInfo.customer_email||'-'}}<el-icon v-copy:click="orderInfo.customer_email"><CopyDocument /></el-icon></el-descriptions-item>
        <el-descriptions-item :label="t('orders.state')">{{orderInfo.shipping_address.country_name||'-'}}</el-descriptions-item>
        <el-descriptions-item :label="t('orders.province')">{{orderInfo.shipping_address.province||'-'}}</el-descriptions-item>
        <el-descriptions-item :label="t('orders.city')">{{orderInfo.shipping_address.city||'-'}}</el-descriptions-item>
        <el-descriptions-item :label="t('orders.area')">{{orderInfo.shipping_address.area||'-'}}</el-descriptions-item>
        <el-descriptions-item :label="t('orders.zip')">{{orderInfo.shipping_address.zip||'-'}}</el-descriptions-item>
        <el-descriptions-item :label="t('orders.town')">{{orderInfo.shipping_address.town||'-'}}</el-descriptions-item>
        <el-descriptions-item :label="t('orders.postAddress')">{{orderInfo.shipping_address.address1||'-'}}</el-descriptions-item>
        <el-descriptions-item :label="t('orders.billAddress')">{{orderInfo.shipping_address.address2||'-'}}</el-descriptions-item>
      </el-descriptions>


    </el-card>
    <el-card class="custom-card" shadow="never">
      <h5>{{ t("orders.wuliuInfo") }}</h5>
      <el-table :data="orderInfo.fulfillments" style="width: 100%" size="small">
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="tracking_company" :label="t('orders.wuliuGongsi')" width="80" />
        <el-table-column prop="tracking_number" :label="t('orders.wuliuDanhao')" width="130"></el-table-column>
        <el-table-column prop="payment_tracking_result" :label="t('orders.wuliuJindu')" width="100"></el-table-column>
        <el-table-column prop="note" :label="t('orders.describe')" ></el-table-column>
        <el-table-column prop="payment_tracking_at" :formatter="formatDate" :label="t('orders.time')" width="140"></el-table-column>
      </el-table>
    </el-card>

    <el-card class="custom-card" shadow="never">
      <h5>{{ t("orders.transaction") }}</h5>
      <el-descriptions :column="4" border size="small">
        <el-descriptions-item label="交易流水号"  min-width="90px">{{orderInfo.transaction.transaction_no||'-'}}</el-descriptions-item>
        <el-descriptions-item label="支付金额" min-width="90px">{{orderInfo.transaction.amount||'-'}}{{ orderInfo.currency_code }}</el-descriptions-item>
        <el-descriptions-item label="支付方式" min-width="90px">{{orderInfo.transaction.payment_method||'-'}}</el-descriptions-item>
        <el-descriptions-item label="收款商户号" min-width="90px">{{orderInfo.transaction.merchant_id||'-'}}</el-descriptions-item>
        <el-descriptions-item label="交易备注" min-width="90px">{{orderInfo.transaction.note||'-'}}</el-descriptions-item>
        <el-descriptions-item label="付款时间" min-width="90px" >{{orderInfo.transaction.pay_at||'-'}}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="custom-card" shadow="never" v-if="orderInfo.diy_fugou>0">
      <h5>其它订单</h5>
      <pure-table  size="small" :data="orderInfo.other" :columns="orders_column"/>
    </el-card>
    <el-card class="custom-card" shadow="never">
      <h5>操作记录</h5>
      <pure-table  size="small" :data="orderInfo.logs" :columns="log_column"/>
    </el-card>
  </re-col>

</template>
<style scoped>
:deep(.el-card) {
  border: none;
}
:deep(.el-card h5) {
  margin-bottom: 10px;
}
</style>
